在初學網頁前端時，通常 JS 不會用到太深入的概念和方法，而是注重在與 DOM 的互動(event)而已。

DOM

那什麼是 DOM 呢?

直接來看 MDN 的解說:

文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。

簡單來說就是 HTML 文件會被以樹狀結構來解析，大概長這樣(圖片來源不可考，如有侵權請立即告知)

也就是由節點組成的樹狀結構，像是這樣

• 節點(node)
• 元素節點(element)
• 屬性節點(attribute)
• 文字節點(text)

關於 DOM 的介紹就到這邊，想更深入瞭解可以試著 google HTML。

接下來看看如何使用 JS 來操作它們吧!

選擇器

顧名思義，我們要操作特定節點時，必須先選擇它。

getElementXXX 系列的 id、class 前方不需要加上 #、.。

document.getElementById("id");
document.getElementsByTagName("tagname");
document.getElementsByClassName("classname");

或是使用 querySelector、querySelectorAll，這比較接近 jQuery 的選擇方法，

記得 id 前方要加上 #，class 要加上 .。

// 選取單一元素
document.querySelector("#id .class span");

// 選取多個元素
document.querySelectorAll(".class");

選擇器的方法有很多種，

• div p 這樣代表 div 內的所有子元素 p。
• div > p 這樣代表所有父元素為 div 的 p 元素。
• div, p 這樣代表所有的 div 元素和 p 元素。
• div + p 這樣代表連著 div 元素後的 p 元素。

個人比較常用的就 4 個，想要了解更詳細的可以 google css selector。

querySelector 例子

index.html

<h1 id="myId">ID : <p></p></h1>

<h1 class="test">First class: <p></p></h1>

<h1 class="test">Second class: <p></p></h1>

script.js

• textContent 可以改變該節點的文字(text)。
• 上方範例中，總共有兩個名為 test 的 class，所以要選取所有時，要使用 querySelectorAll，而不能使用 querySelector。

document.querySelector("#myId p").textContent = "#id _ p";

var class_choose = document.querySelectorAll(".test p");
for(var i = 0; i < class_choose.length; i++){
  class_choose[i].textContent = "第 " + (i + 1) + "個 class";
}

判斷元素是否存在

這邊有一個方法可以快速判斷某 id、class 之元素是否存在，

if(document.getElementById("test") == null) {
  console.log("不存在");
} else {
  console.log("存在");
}

延伸閱讀

前端的發展可以說是相當快，使用的工具/框架也是一直在更新，很容易讓人產生學不動或是不知為何而學的想法。
但是每個工具/框架的出現，都一定是在當時環境的需求下而誕生的，唯有了解這些工具是為了解決何種問題才會出現，這樣的學習才是比較健康的，而不是為學而學。

這裡有兩篇文章，個人極力推薦閱讀，

1. Huli 大大的: 零基礎的小明要如何成為前端工程師？
2. 以及前陣子 Github 捨棄了對於 jQuery 的依賴與使用: GitHub：我們為什麼會棄用jQuery

明日會介紹選擇器對於 DOM 的 HTML/CSS 的操作。

今日的分享就到這，我們明天見